<template>
    <div :class="[{ mask: props.detailInf.active }]" @click="props.detailInf.active = false"></div>
    <div :class="[{ window: true }, { active: props.detailInf.active }]">
        <div class="closeBtn">
            <div class="close" @click="props.detailInf.active = false">X</div>
        </div>
        <div class="pic" ref="picCon">
            <img v-for="(item, index) in detail?.appletDesc" :ref='`img${index}`' :key="item" class="picItem"
                :src="item" alt="图片加载失败">
        </div>
        <div class="picCatalog">
            <img class="catalogItem" v-for="(item, index) in detail?.appletDesc" :key="item" @click="goPic(index)"
                :src="item" alt="图片加载失败">
        </div>
        <div class="inf">
            <div class="title">{{ detail?.name }}</div>
            <div class="title sub">{{ detail?.french }}</div>
            <div>￥：{{ detail?.price }}</div>

            <div class="detail">
                <div class="taste" v-for="(item, index) in detail?.basic" :key="item">
                    <div class="key">{{ item.chinese }}</div>
                    <span style="width: 20px;"></span>
                    <div class="value">{{ item.value }}</div>
                </div>
            </div>

            <div class="btnCon">
                <div class="btn">立即购买</div>
                <div class="btn" style="background-color: white;color: black;">加入购物袋</div>
            </div>

            <div class="comment">
                <div class="header">
                    评论
                </div>
                <div class="body">
                    <!-- <div class="commentList"></div> -->
                    <CommentItem v-for="(item, index) in commentList" :key="index" :commmentInf="item">
                    </CommentItem>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.mask {
    height: 100vh;
    width: 100vw;
    z-index: 998;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #00000080;

}

.window {
    height: 90vh;
    width: 100%;
    position: fixed;
    bottom: -90vh;
    left: 0;
    transition: all 0.5s ease-in-out;
    background-color: white;
    border-top: 20px;
    padding: 20px;
    gap: 0px;
    z-index: 999;
    box-sizing: border-box;
    display: flex;

    &.active {
        bottom: 0;
        gap: 50px;
    }


    .closeBtn {
        height: 20px;
        width: 20px;
        position: absolute;
        right: 30px;
        top: 10px;
        font-size: 40px;
        cursor: pointer;
    }


    .pic {
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        padding-right: 14px;

        img {
            height: 900px;
        }

        //自定义滚动条
        &::-webkit-scrollbar {
            //向左间隔2px

            width: 2px;
        }

        &::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        &::-webkit-scrollbar-thumb {
            background: #000000;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    }

    .picCatalog {
        display: flex;
        flex-direction: column;

        .catalogItem {
            width: 50px;
            cursor: pointer;
        }
    }

    .inf {
        width: 50%;

        .title {
            font-size: 40px;
            font-weight: bold;

            &.sub {
                font-size: 20px;
                font-weight: normal;
            }
        }

        .detail {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            gap: 0px;

            .taste {
                width: 46%;
                display: flex;
                align-items: center;

                .key {
                    font-size: 17px;
                    font-weight: bold;
                }

                .value {
                    font-size: 17px;
                    font-weight: normal;
                }
            }
        }
    }

    .btnCon {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .btn {
            width: 30%;
            height: 50px;
            background-color: #000000;
            border: 1px solid black;
            color: white;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }

    .comment {
        margin-top: 40px;
        padding-bottom: 10px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        width: 60%;
        height: 400px;
        padding-right: 4px;

        //自定义滚动条
        &::-webkit-scrollbar {
            width: 2px;
        }

        &::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        &::-webkit-scrollbar-thumb {
            background: #000000;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .header {
            font-size: 26px;
            font-weight: bold;
            color: #555555;

            &::after {
                content: '';
                display: block;
                width: 30%;
                height: 2px;
                background-color: #000000;
            }
        }

    }
}
</style>

<script setup>
import { ref, watch } from 'vue'
import { Api } from '@/apis/index'
import CommentItem from './CommentItem.vue';
const props = defineProps({
    detailInf: {
        type: Object,
        default: () => { }
    }
})

const getCommentList = () => {
    Api.getCommentList().then(res => {
        if (res.code === 200) {
            commentList.value = res.data.commentList
        }
    })
}
const commentList = ref([
    { name: '张三', content: '好吃', time: '2022-01-01' },
    { name: '李四', content: '一般', time: '2022-01-02' },
    { name: '王五', content: '好吃吃', time: '2022-01-03' },
])
const detail = ref(null)
//监听传进来的数据，如果存在inf.id则发送请求
watch(() => props.detailInf.inf, async (newVal) => {
    if (newVal.id) {
        //发送请求
        const res = await Api.getCakeDetail(newVal.id)
        getCommentList()
        if (res.code === 200) {
            detail.value = res.data
        }
    }
})
watch(() => props.detailInf.active, (newVal) => {
    // detail.value=null;
})
const picCon = ref(null)
const goPic = (index) => {
    // 将pic里面的内容跳转到对应的ref--x
    // 偷懒，想想优化
    picCon.value.scrollTo({
        top: index * 900,
        behavior: 'smooth'
    })
}
</script>